<template>
  <div id="app">
    <!-- 1.路由 -->
    <!-- <router-link to="/about">About</router-link> -->
    <!-- <router-view/> -->
    <!-- 2.组件 -->
    <!-- <Luckysheet
      v-bind:sheetParams="sheetParams"
      @showDialog="showDialog"
    ></Luckysheet> -->
    <!-- <Wrap /> -->
    <!-- <letA /> -->
    <!-- <jiegou /> -->
    <!-- <promise/> -->
    <moreData/>
    <!-- 3.表格弹框 -->
    <!-- <el-dialog title="详情" :visible.sync="dialogTableVisible">
      <h3>资产编码：{{ stakeNo }}</h3>
      <el-table :data="gridData">
        <el-table-column
          property="date"
          label="资产编码"
          width="150"
        ></el-table-column>
        <el-table-column
          property="name"
          label="桩类型"
          width="200"
        ></el-table-column>
        <el-table-column
          property="address"
          label="充电机编号"
        ></el-table-column>
      </el-table>
    </el-dialog> -->
    <!-- 4.表单弹框 -->
    <!-- <el-dialog title="详情" :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <el-form-item label="资产编码" :label-width="formLabelWidth">
          <el-input v-model="form.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="桩类型" :label-width="formLabelWidth">
          <el-select v-model="form.region" placeholder="请选择充电机编号">
            <el-option label="类型一" value="shanghai"></el-option>
            <el-option label="类型二" value="beijing"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogFormVisible = false"
          >确 定</el-button
        >
      </div>
    </el-dialog> -->
    <!-- <el-dialog
      :title="luckysheetName"
      :visible.sync="centerDialogVisible"
      v-if="centerDialogVisible"
      width="80%"
      :fullscreen="fullscreen"
      :lock-scroll="lockScroll"
      :close-on-click-modal="closeOnClickModal"
      :close-on-press-escape="closeOnPressEscape"
    >
      <div style="width: 100%; height: 500px; position: relative">
        <AboutView
          ref="luckysheetRef"
          v-on:getLuckySheetData="receive"
          v-bind:sheetParams="sheetParams"
        />
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="handleToClose">取 消</el-button>
        <el-button type="primary" @click="saveSheetData">确 定</el-button>
      </div>
    </el-dialog> -->
  </div>
</template>

<script>
import Luckysheet from "@/components/luckysheet.vue";
import shaixuan from "./views/shaixuan.vue";
import Wrap from "./views/wrap.vue";
import letA from "./views/let.vue";
import jiegou from "./views/jiegou.vue"
import promise from "./views/components/promise.vue"
import moreData from "./views/components/moreData.vue"
export default {
  components: {
    Luckysheet,
    Wrap,
    shaixuan,
    letA,
    jiegou,
    promise,
    moreData,
  },
  data() {
    return {
      // 唯一值
      uniqueKey: "资产编码",
      // 资产编码
      stakeNo: "",

      // centerDialogVisible: true,
      // closeOnClickModal: false,
      // closeOnPressEscape: false,
      // fullscreen: false,
      // lockScroll: false,
      // luckysheetName: "luckysheet数据编辑",
      sheetParams: [
        {
          excelHeader: ["资产编码", "桩类型", "充电机编号"],
          excelData: {
            资产编码: ["10010", "10020", "10030"],
            桩类型: ["海东", "河北", "山西"],
            充电机编号: ["111", "222", "333"],
          },
          fontColorArr: [{ sheet: 0, cArr: [0, 2] }],
          configData: {
            name: "已投运",
            status: 1,
            row: 11,
            column: 11,
            defaultColWidth: 100,
          },
        },
        {
          excelHeader: ["姓名", "年龄", "性别"],
          excelData: {
            姓名: ["张三", "李四", "王五"],
            年龄: ["16", "18", "20"],
            性别: ["男", "女", "男"],
          },
          fontColorArr: [{ sheet: 1, cArr: [1] }],
          configData: {
            name: "待投运",
            status: 0,
            row: 11,
            column: 22,
            defaultColWidth: 100,
          },
        },
        {
          excelHeader: ["设备类型", "桩状态", "桩性质"],
          excelData: {
            设备类型: ["1", "2", "3"],
            桩状态: ["4", "5", "6"],
            桩性质: ["7", "8", "9"],
          },
          fontColorArr: [{ sheet: 2, cArr: [0, 1] }],
          configData: {
            name: "未投运",
            status: 0,
            row: 11,
            column: 22,
            defaultColWidth: 100,
          },
        },
      ],

      /* 弹窗 */
      gridData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
      ],
      dialogTableVisible: false,
      dialogFormVisible: false,
      form: {
        name: "",
        region: "",
        date1: "",
        date2: "",
        delivery: false,
        type: [],
        resource: "",
        desc: "",
      },
      formLabelWidth: "120px",
    };
  },
  
  methods: {
    // 显示弹窗
    async showDialog({ params, position, array }) {
      // console.log(params, "这是参数==》");
      // if (!params || position.c) return;
      // console.log(position.c);
      // const c = this.sheetParams.excelHeader.indexOf(this.uniqueKey);
      // this.stakeNo = luckysheet.getCellValue(position.r, c);
      // this.dialogTableVisible = true;
      // ------------------------------------------
      // console.log("值", params);
      // console.log("位置", position);
      // console.log("数组", array);
      if (params) {
        const c = this.sheetParams[0].excelHeader.indexOf(this.uniqueKey);
        if (position.c == c && Number(params.v)) {
          this.stakeNo = luckysheet.getCellValue(position.r, c);
          this.dialogTableVisible = true;
        }
      }
      // const res = await luckysheet.getRangeValue("A3:C3")

      // this.dialogFormVisible = true;

      // console.log("值", params.m);
      // console.log("位置", );
      // console.log("数组", array);
    },
    // saveSheetData() {
    //   var _this = this;
    //   _this.$refs.luckysheetRef.getSheetData(); //调用子组件获取sheet数据
    //   console.log(JSON.stringify(_this.luckySheetData));
    //   // document.getElementById("luckysheet-input-box").style.zIndex = "-1";
    //   // document.getElementsByClassName("luckysheet-cell-input").innerHTML = "";
    //   // _this.dialogFormVisible = false; //关闭对话框
    // },
    //luckySheet数据接收
    // receive: function (sheetTitle, commonData) {
    //   var _this = this;
    //   _this.luckySheetData.excelHeader = sheetTitle;
    //   _this.luckySheetData.excelData = commonData;
    // },
    // handleToClose() {
    //   this.centerDialogVisible = false;
    // },
  },
};
</script>
<style lang="less">
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

nav {
  padding: 30px;

  a {
    font-weight: bold;
    color: #2c3e50;

    &.router-link-exact-active {
      color: #42b983;
    }
  }
}
</style>
